<template>
    <div class="content_main">
        <div class="page-title">{{ $t('Popular_Activities') }}</div>
        <div class="box">
            <div class="box_left">
                <div class="box_left_item" v-for="item in game_list" :key="item.id" @click="$router.push('/home/ActivityDetails/'+item.id)">
                    <div class="img_box">
                        <img width="100%" height="100%" :src="$baseUrl+item.article_home_img" alt="">
                    </div>
                    <div class="box_left_right">
                        <div class="gameName p">{{ item.article_title }}</div>
                        <span class="status" v-if="checkExpiry(item.end_time)">
                            <div>{{ $t('have_hand') }}</div>
                        </span>
                        <span class="end" v-if="!checkExpiry(item.end_time)">
                            <div>{{ $t('Ended') }}</div>
                        </span>
                        <div class="listItem-info">{{ item.desc }}</div>
                        <div class="listItem-info-other">
                            <span style="margin-left: 20px;">{{ $t('Activity_Time') }}：{{ item.start_time }}～{{ item.end_time }}</span>
                            <span class="listItem-info-other-game">{{ item.game_name }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import axios from '@/utils/api'
import { reactive } from "vue";

const game_list = reactive([])
const getList = async () => {
    const list = await axios.get('/getActivityList')
    Object.assign(game_list, list.data.data)
    // console.log(game_list);
}
getList()

const getNow = ()=>{
    // 获取当前时间
    const currentDate = new Date();

    // 获取年份、月份和日期
    const year = currentDate.getFullYear();
    const month = String(currentDate.getMonth() + 1).padStart(2, '0');  // getMonth() 返回的是 0-11，需要加 1
    const day = String(currentDate.getDate()).padStart(2, '0');  // 确保日期是两位数

    // 格式化为 'YYYY-MM-DD'
    const formattedDate = `${year}-${month}-${day}`;
    return formattedDate;
}

const checkExpiry = (endtime) => {
    const currentDate = getNow()

    console.log(currentDate, endtime);

    if (currentDate > endtime) {
        return false
    } else {
        return true
    }
}

</script>

<style lang="less" scoped>
.page-title {
    font-size: 24px;
    color: rgba(0, 0, 0, .85);
    letter-spacing: 1px;
    line-height: 32px;
    margin-bottom: 20px;
    margin-top: 30px;
}

.box {
    display: flex;

    .box_left {
        margin-left: 0;
        width: 80%;

        .box_left_item:hover {
            .gameName {
                color: @primary-color;
            }
        }

        .box_left_item {
            transition: box-shadow .5s;
            cursor: pointer;
            box-sizing: border-box;
            transition: box-shadow .5s;
            overflow: hidden;
            display: flex;
            padding: 30px 0;
            border-top: 1px solid rgba(0, 0, 0, .2);

            .img_box {
                width: 300px;
                height: 170px;
                margin: initial;
                overflow: hidden;
                border-radius: 10px;

                img {
                    border-radius: 10px;
                    transition: all .3s;
                }

                img:hover {
                    transform: scale(1.2);
                }
            }

            .gameName {
                font-size: 20px;
                color: rgba(0, 0, 0, .85);
                line-height: 28px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 300px;
            }

            .box_left_right {
                display: flex;
                flex-direction: column;
                margin: initial;
                padding: 20px;

                box-sizing: border-box;
                padding: 5px 20px 0 20px;
                flex: 1;
                position: relative;

                .listItem-info-other-game {
                    display: inline-block;
                    // width: 125px;
                    text-align: right;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-right: 0
                }

                .listItem-info-other {
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    color: #8d97ad;
                    line-height: 22px;
                    position: absolute;
                    bottom: 4px;
                    left: 0;
                    right: 0;
                }

                .listItem-info {
                    margin-top: 10px;
                    font-size: 14px;
                    color: rgba(0, 0, 0, .6);
                    line-height: 22px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    white-space: normal;
                    word-break: break-all;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }

                .status {
                    // width: 42px;
                    height: 22px;
                    // line-height: 18px;
                    border-radius: 11px;
                    background: #96d997;
                    color: #fff;
                    text-align: center;
                    margin-left: 6px;
                    display: inline-block;
                    position: relative;
                    vertical-align: middle;
                    margin-top: -4px;

                    div {
                        font-size: 12px;
                        transform: scale(0.88);
                        line-height: 18px;
                        padding: 2px 5px;
                    }
                }

                .end {
                    // width: 42px;
                    height: 22px;
                    border-radius: 11px;
                    background: #979797;
                    color: #fff;
                    text-align: center;
                    margin-left: 6px;
                    display: inline-block;
                    position: relative;
                    vertical-align: middle;
                    margin-top: -4px;

                    div {
                        font-size: 12px;
                        transform: scale(0.88);
                        line-height: 18px;
                        padding: 2px 5px;
                    }
                }

                div {
                    margin: initial;
                }

                .p {
                    margin-bottom: 10px;
                }

                .gameBook {
                    position: relative;
                    display: flex;
                    margin-top: 30px;

                    .gameBookNum {
                        .num {
                            font-size: 12px;
                            color: #98a2ab;
                            line-height: 20px;
                        }

                        .bookNum {
                            font-size: 18px;
                            color: rgba(0, 0, 0, .6);
                            margin-right: 5px;
                            font-weight: 700;
                        }
                    }

                    .label {
                        position: absolute;
                        right: 0;
                        margin-left: 50px;

                        span {
                            border: 1px solid rgba(0, 0, 0, .1);
                            margin-right: 5px;
                            padding: 1px 5px;
                            font-size: 12px;
                            border-radius: 10px;
                            cursor: pointer;
                            color: rgba(0, 0, 0, .5);
                        }

                        span:hover {
                            border-color: rgb(35, 119, 245);
                        }
                    }
                }
            }
        }

    }

    .box_right {
        width: 30%;

    }
}
</style>